<template>
  <div class="add">
    <el-breadcrumb separator="/" class="add_box">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>工作日历</el-breadcrumb-item>
        <el-breadcrumb-item>新增工作日历_周</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="top">
        基本设置
      </div>

      <div class="Basic_Settings">
          <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="120px">

          <el-form-item label="分组名称:" prop="name">
            <el-input v-model="form.name" placeholder="请编入分组名称（最多30个汉字或字母）"/>
          </el-form-item>

          <el-form-item label="适用范围:" prop="desc1">
            <el-input v-model="form.desc1" type="textarea" />
          </el-form-item>  

          <el-form-item label="工作日历:">
            <el-select v-model="form.region1" placeholder="请选择工作日历方式">
              <el-option label="上五休二" value="上五休二" />
              <el-option label="周工作00" value="周工作00"/>
              <el-option label="上二休一" value="上二休一" />
            </el-select>
          </el-form-item>  

          <el-form-item label="班次:" prop="desc2">
            <el-input v-model="form.desc2" type="textarea" />
          </el-form-item> 

          <el-form-item label="打卡方式:">
            <el-select v-model="form.region2" placeholder="请选择打卡方式">
              <el-option label="内部人员打卡方式" value="内部人员打卡方式"/>
              <el-option label="技术人员打卡方式" value="技术人员打卡方式"/>
              <el-option label="设计部打卡方式" value="设计部打卡方式" />
            </el-select>
          </el-form-item>

          <el-form-item label="拍照打卡:">
            <el-switch v-model="form.delivery1" />
          </el-form-item>

          <div class="xuanze">
              <el-radio-group v-model="form.resource">
                <el-radio label="人脸识别打卡验证" />
              </el-radio-group>
          </div>
          <div class="xuanze">
              <el-radio-group v-model="form.resource" >
                <el-radio label="现场照片打卡" />
              </el-radio-group>
          </div> 
          
          <el-form-item label="外勤打卡:">
            <el-switch v-model="form.delivery2" />
          </el-form-item>

    
          <div class="xuanze">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox label="外勤审批" name="type" />
                </el-checkbox-group>
          </div>
          <div class="xuanze">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox label="外勤打卡需填写备注" name="type" />
                </el-checkbox-group>
          </div>
          <div class="xuanze">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox label="外勤打卡需拍照" name="type" />
                </el-checkbox-group>
          </div>
          <div class="xuanze">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox label="人脸识别打卡验证" name="type" />
                </el-checkbox-group>
          </div>
          <div class="xuanze">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox label="允许外勤卡更新内勤卡" name="type" />
                </el-checkbox-group>
          </div>
          <div class="xuanze">
            <el-checkbox-group v-model="form.type">
                  <el-checkbox label="允许地点微调" name="type" />
                </el-checkbox-group>
          </div>
          
            
          <div class="active_bottom">
              <el-form-item>
              <el-button @click="fund">返回</el-button>    
              <el-button @click="funb">取消</el-button>
              <el-button type="primary" @click="onSubmit(form.name,form.desc1,form.region1,form.desc2,form.region2)">保存</el-button>
              </el-form-item> 
          </div>

        </el-form>
      </div>
  </div>
</template>

<script setup>
import { ElNotification } from "element-plus";
import { onMounted, ref } from 'vue'
import * as service from "@/api/lei/lei";
// 表单校验时要定义：ruleFormRef
var ruleFormRef = ref();
// 表单验证的数据
var rules = ref({
  name: [{ required: true, message: "请编入分组名称", trigger: "blur" }],
  desc1: [{ required: true, message: "请输入适用范围", trigger: "blur" }],
  desc2: [{ required: true, message: "请选择班次", trigger: "blur" }],
});
// 引入路由
import { useRouter } from "vue-router";
var $router = useRouter()

const form = ref({
  name: '',
  region1: '上五休二',
  region2: '内部人员打卡方式',
  delivery1: false,
  delivery2: false,
  type: [],
  resource1: '工作日',
  desc1: '',
  desc2: '',
})

// 取消按钮
var funb =()=>{
   
}
// 编辑按钮
var func =()=>{
    
}
// 返回按钮（返回工作日历页面）
var fund =()=>{
    $router.push('/index/kaoqin_group')
}
// 保存按钮，发送添加请求
const onSubmit = (KQname,KQrange,KQdate,KQbc,KQway) => {
        console.log(KQname,KQrange,KQdate,KQbc,KQway);
        //获取实时时间
        const currentDate1 = new Date().toLocaleDateString(); // 将字符串转换为日期格式
        const currentDate2 = new Date().toLocaleTimeString();
        var KQtime = `${currentDate1} ${currentDate2}`
        
  ruleFormRef.value.validate(async(valid, fields) => {
          if (valid) {
            var res = await service.KQFZ_add({KQname,KQrange,KQdate,KQbc,KQway,KQtime})
            if (res.status===201) {
                  ElNotification({
                      title: "通知",
                      message: "打卡方式添加成功",
                      type: "success",
                      duration: 2000,
                    });
                  $router.push('/index/kaoqin_group')
              }
          } else {
            console.log('error submit!', fields)
          }
        })    
}
</script>

<style scoped lang='scss'>
.add{
    height:500px ;
    ::-webkit-scrollbar{
        overflow: hidden;
    }
  
    .add_box{
        padding: 10px 15px;
        font-size: 14px;
    } 
    .top{
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        border-bottom: 1px solid #f5f5f5;
        padding:  10px 15px;
        font-weight: bold;
        }
    .Basic_Settings{ 
        width: 1100px;
        height: 500px;
        margin-top: 10px;
        box-sizing: border-box;
        .el-form-item{
            margin: 0;
        }
        .active_box{
            display: flex;
        }
        :deep(.el-input){
            width: 500px !important;
        }
        :deep(.el-input--suffix){
            width: 200px !important;
        }
        :deep(.el-form-item__label){
            width: 160px !important;
        }
        .active_bottom{
            margin-top: 0px;
        }
        .moren{
            margin-left: 150px;
            div{
                margin: 10px 0;
                font-size: 12px;
                color: #211f1f;
            }
        }
        :deep(.el-textarea__inner){
          width: 500px !important;
          margin: 15px 0;
        }
       .xuanze{
        margin-left: 160px;
       }
    }
}

</style>